<template>
  <view>
    <!-- 背景 -->
    <view class="album_bg">
      <image mode="widthFix" :src="album.cover"></image>
      <view class="album_info">
        <view class="album_name">{{ album.ename }}</view>
        <view class="album_button">关注专辑</view>
      </view>
    </view>

    <!-- 专辑作者 -->
    <view class="album_author">
      <view class="album_author_info">
        <image mode="aspectFill" :src="album.user.avatar"></image>
        <text>{{ album.user.name }}</text>
      </view>
      <view class="album_author_decs"
        ><text>{{ album.desc }}</text></view
      >
    </view>

    <!-- 列表 -->
    <view class="album_list">
      <view class="album_items" v-for="item in wallpaper" :key="item.id">
        <image mode="aspectFill" :src="item.thumb"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        limit: 30,
        adult: false,
        first: 1,
        order: "new",
      },
      id: "",
      album: {},
      wallpaper: [],
    };
  },
  onLoad(option) {
    console.log(option);
    this.id = option.id;
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: `http://service.picasso.adesk.com/v1/wallpaper/album/${this.id}/wallpaper`,
        data: this.params,
      }).then((res) => {
        // console.log(res);
        this.album = res.data.res.album;
        this.wallpaper = res.data.res.wallpaper;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.album_bg {
  position: relative;
  .album_info {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 15rpx 15rpx 25rpx;
    width: 100%;
    color: #fff;
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3));
    .album_name {
      font-weight: 600;
      font-size: 36rpx;
    }

    .album_button {
      height: 60rpx;
      width: 150rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: $color;
      border-radius: 10rpx;
    }
  }
}
.album_author {
  padding: 30rpx 15rpx;
  .album_author_info {
    vertical-align: top;
    image {
      float: left;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
    }

    text {
      padding-left: 15rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: #111;
    }
  }

  .album_author_decs {
    padding-top: 30rpx;
    font-size: 24rpx;
  }
}
.album_list {
  padding: 0 5rpx;
  display: flex;
  flex-wrap: wrap;
  .album_items {
    width: 33.33%;
    padding: 5rpx;
  }
}
</style>
